import * as types from "../types";
import { getProductByGroup } from "../../api/product";
import Vue from "vue";

export default {
  state: {
    // 数据格式： {商品ID1:{此id对应商品的详细信息},{商品ID2:{此id对应商品的详细信息}}
    product: {},
  },
  getters: {
    productIdList({ product }) {
      //  返回对应的id的数组
      return Object.keys(product);
    },
    productList({ product }) {
      //   返回对应的值的数组
      return Object.values(product);
    },
    getProductList({ product }) {
      // console.log(product)
      // arr =[id1,id2,id3] // 根据这样的数组找对应的商品信息进行返回
      return function (arr) {
        return arr.map((id) => product[id]);
      };
    },
  },
  mutations: {
    // 添加商品到缓存，把数组设置成对象的形式
    [types.SET_PRODUCT]({ product }, data) {
      data.forEach((item) => {
        //  Vue.set(要操作的对象,对象的key,key的值)
        Vue.set(product, item.id, item);
      });
    },
    [types.EDIT_PRODUCT]({ product }, data) {
      Vue.set(product, data.id, data);
    },
    [types.DELETE_PRODUCT]({ product }, data) {
      Vue.delete(product, data.id);
    },
  },
  actions: {
    // 异步获取商品列表数据， 根据商品id的数组来查找商品数据
    // data =[id1.id2,id3,id4]  如果这些id在我们数据里面有就不再向后端请求 如果这些id不存在 就异步向后端请求这些id的数据
    async [types.SET_PRODUCT]({ commit, state: { product } }, data) {
      if (!data || data.length === 0) return;
      // 如果返回的id为空 就说明这条数据在缓存里没有 得到的arr数组就是需要向后端请求的数据
      const arr = data.filter((id) => !product[id]);
      // console.log("arr", arr); // id
      if (arr.length === 0) return;
      const result = await getProductByGroup({ group: arr });

      commit(types.SET_PRODUCT, result);
    },
  },
};
